<template>
  <div class="father">
    <van-image
      width="100%"
      fit="cover"
      src="https://img01.yzcdn.cn/vant/cat.jpeg"
    />

    <div class="box">
      <div class="headImg">
        <img :src="`http://liufusong.top:8080${person.avatar}`" alt="" />
      </div>
      <p style="margin-top: 50px">{{person.nickname}}</p>
      <van-button
        round
        type="info"
        @click="clickfn"
        style="width: 80px; height: 30px"
        >{{ isQuit }}</van-button
      >
      <span>编辑个人资料 ></span>
    </div>
    <van-dialog
      v-model="isShow"
      title="确认退出？"
      @confirm="confirmFn"
      show-cancel-button
    >
    </van-dialog>
    <van-grid :column-num="3" style="margin-top: 80px">
      <van-grid-item to="/mycollect" icon="star-o" text="我的收藏" />
      <van-grid-item to="/myrent" icon="home-o" text="我的出租" />
      <van-grid-item icon="clock-o" text="看房记录" />
      <van-grid-item icon="fire-o" text="成为房主" />
      <van-grid-item icon="user-o" text="个人资料" />
      <van-grid-item icon="phone-o" text="联系我们" />
    </van-grid>

    <van-image
      width="90%"
      height="80px"
      fit="cover"
      style="margin-left: 5%"
      src="http://liufusong.top:8080/img/profile/join.png"
    />
  </div>
</template>

<script>
import { getToken, delToken } from "@/utils/storage";
import { getUser } from "@/api/user";
export default {
  data() {
    return {
      isShow: false,
      active: "0",
      isQuit: "去登录",
      person:{
        nickname: "游客",
        avatar:'https://img01.yzcdn.cn/vant/cat.jpeg',
      },
      token:'',
    };
  },
  methods: {
    clickfn() {
      if(this.token)
      {this.isShow = true;}
      else{
        this.$router.push('/login')
      }
      
    },
    confirmFn() {
      delToken();
      this.isQuit="去登录",
      this.person={
        nickname: "游客",
        avatar:'https://img01.yzcdn.cn/vant/cat.jpeg',
      },
      this.token='',
      this.$router.push("/user");
    },
  },
  async created() {
    const { body } = await getUser();
    // console.log(body);
    if(body){
      this.person = body
    const token = getToken();
    this.token = token
    if (this.token){
      this.isQuit="退出"
    }
    }
  },
};
</script>

<style>
.father {
  position: relative;
}
.box {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  height: 200px;
  left: 5%;
  top: 130px;
  box-shadow: 0 0 3px #333;
  background-color: #fff;
  border: 1px solid #ccc;
}
.box > span {
  color: #666;
  font-size: 14px;
  margin-top: 20px;
}
.box .headImg {
  position: absolute;
  width: 80px;
  height: 80px;
  top: -40px;
  border-radius: 50% 50%;
  border: 1px solid #ccc;
  overflow: hidden;
}
.box .headImg img {
  width: 100%;
  height: 100%;
}
</style>
